<!DOCTYPE html>
{%  load static  %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js"></script>
    <link rel="stylesheet" href="{% static "css/index.css" %}">
</head>
<body>
<p>
    Welcome to Qing Feng Cloud Album!
</p>
<div id="photo">


    <div v-if="pictures" id="list">
        <template v-for="image in pictures">
            <div>
                <img :src="[[ prePath + image]]" alt="">
            </div>
        </template>
    </div>

{#  加号按钮#}
    <div id="add-bt">
            <div id="selected_num">选中了[[addFiles.length]]个文件</div>
            <input @change="upload($event)"
                   ref="file_ref"
                   type="file"
                   name="pictures"
                   style="display:none;"
                   accept=".jpg,.png" multiple>
            <div id="add-symbol" @click="symbol_upload" style="">
                +
            </div>
    </div>

{#    提交按钮#}
    <div id="submit-btn" @click="add_submit">提交</div>

{#    换页#}
    <div id="switch-page">
        <p>
            <button @click="get_last_page">last</button>

            <template  v-for="n in totalPageNum-1">
                <span :class="{'selected_page':n == curPageNum}">
                    &ensp;[[ n ]]
                </span>
            </template>
            <span :class="{'selected_page':totalPageNum == curPageNum}">
                    &ensp;[[totalPageNum]]&ensp;
            </span>
            <button @click="get_next_page">next</button>
        </p>
    </div>
</div>

<script>
    new Vue({
        delimiters:["[[","]]"],
        el:"#photo",
        data:{
            prePath: "/static/",
            pictures:null,
            curPageNum:1,
            totalPageNum:1,
            addFiles:[],
        },
        mounted(){
            this.get_n_page(1)
            {#console.log(Cookies.get('csrftoken'))#}
        },
        methods:{
            get_n_page(n){
                axios({
                    method:"get",
                    url:"/get-one-page",
                    params:{
                        pageNum:n
                    }
                }).then(res=>{
                    this.pictures = res.data.data
                    this.totalPageNum = res.data.totalPageNum
                })
            },
            get_next_page(){
                console.log(this.curPageNum)
                if(this.curPageNum<this.totalPageNum){
                    this.curPageNum += 1
                    this.get_n_page(this.curPageNum)
                }
            },
            get_last_page(){
                if(this.curPageNum>1){
                    this.curPageNum -= 1
                    this.get_n_page(this.curPageNum)
                }
            },

            symbol_upload(){
                this.$refs.file_ref.click();
            },
            upload(event){
                let files = event.target.files
                let i = 0
                console.log("Selected File Number:" + event.target.files.length)
                for(;i<files.length;i++){
                    this.addFiles.push(files[i])
                }
            },
            add_submit(){
                if(this.addFiles.length == 0){
                    alert("Please some pictures to upload!")
                    return
                }
                let formData = new FormData()
                formData.append("name","long")
                for(let i=0;i<this.addFiles.length;i++){
                    formData.append('pictures',this.addFiles[i]);
                }
                let headers = {
                        'Content-Type': 'multipart/form-data',
                        'X-CSRFToken': Cookies.get("csrftoken")
                }
                axios({
                    method:"post",
                    url:"/add-pictures",
                    data:formData,
                    headers:headers
                }).then(res=>{
                    alert(res.data.state)
                    this.addFiles = []
                }).catch(err=>{
                    alert(err)
                })
            }
        }
    })
</script>
</body>
</html>